<template>
  <el-link type="danger" @click="deleteIssue">删除</el-link>
</template>

<script>
export default {
  name: 'DeleteIssueLink', // 删除问题按钮
  props: {
    issue: { // 要删除的问题
      type: Object,
      required: true,
    },
  },
  methods: {
    // 删除问题
    deleteIssue() {
      const msg = `<div>确认删除问题 <strong class="el-alert--error is-light is-bold">${this.issue.title}</strong> 吗？</div>`;
      this.$msgbox({
        title: '提示',
        message: msg,
        dangerouslyUseHTMLString: true,
        showCancelButton: true, // 显示取消按钮
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        confirmButtonLoading: false,
        confirmButtonClass: 'el-button--danger',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            Object.assign(instance, {
              confirmButtonLoading: true,
              confirmButtonText: '执行中...',
            });
            this.$api.spaceIssues.delete({
              spaceId: this.issue.space.id,
              issueId: this.issue.id,
            }).then(() => {
              this.$message.success('删除成功');
              this.goBack();
            }).catch(() => {})
              .then(() => done());
          } else done();
        },
      });
    },
  },
};
</script>

<style></style>
